<template>
  <!--导航栏-->
    <div class="masking">
      <div class="title">全部类目</div>
      <ul>
        <li v-for="(val, key) in AllCategories" :key=key>
          <img :src="val.ACimg" alt="">
          <p>{{val.ACTitle}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "AllCategories",
      data(){
          return{
            AllCategories:[
              {ACTitle:'精选',ACimg:require('../../../assets/jingxuan.jpg')},
              {ACTitle:'食品',ACimg:require('../../../assets/shipin.jpg')},
              {ACTitle:'母婴',ACimg:require('../../../assets/muying.jpg')},
              {ACTitle:'家居',ACimg:require('../../../assets/jiaju.jpg')},
              {ACTitle:'女装',ACimg:require('../../../assets/nvzhuang.jpg')},
              {ACTitle:'生鲜',ACimg:require('../../../assets/shengxian.jpg')},
              {ACTitle:'小家电',ACimg:require('../../../assets/xiaojiadian.jpg')},
              {ACTitle:'美妆个护',ACimg:require('../../../assets/meizhuanggehu.jpg')},
              {ACTitle:'男装',ACimg:require('../../../assets/nanzhuang.jpg')},
              {ACTitle:'家纺',ACimg:require('../../../assets/jiafang.jpg')},
              {ACTitle:'手机电脑',ACimg:require('../../../assets/shoujidiannao.jpg')},
              {ACTitle:'大家电',ACimg:require('../../../assets/dajiadian.jpg')},
              {ACTitle:'家装',ACimg:require('../../../assets/shafa.jpg')},
              {ACTitle:'车品',ACimg:require('../../../assets/chepin.jpg')},
              {ACTitle:'苏宁极物',ACimg:require('../../../assets/suningjiwu.jpg')},
              {ACTitle:'鞋包',ACimg:require('../../../assets/xiebao.jpg')},
              {ACTitle:'绿植宠物',ACimg:require('../../../assets/lvzhichongwu.jpg')},
              {ACTitle:'内衣',ACimg:require('../../../assets/neiyi.jpg')},
              {ACTitle:'珠宝配饰',ACimg:require('../../../assets/zhubaopeishi.jpg')},
              {ACTitle:'运动户外',ACimg:require('../../../assets/yundonghuwai.jpg')},
              {ACTitle:'图书',ACimg:require('../../../assets/tushu.jpg')},
              ],
          }
      },
      methods:{
      },
      mounted() {
      }
    }
</script>,

<style scoped lang="scss">
.masking{
  position: fixed;
  top: 275px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  .title{
    position: absolute;
    top: -100px;
    left: 120px;
  }
  ul{
    width: 100vw;
    height: 490px*3;
    list-style: none;
    background: white;
    font-size: 0;
    padding: 30px 99px;
    box-sizing: border-box;
    border-radius: 0 0 36px 36px;
    li{
      font-size: 40px;
      width: 20%;
      height: 490px*3/5;
      text-align: center;
      display: inline-block;
      img{
        width: 50px*3;
        height: 50px*3;
      }
      p{
        margin: 0;
        color: #333;
      }
    }
  }
}
</style>
